<div>

    <h3>用户管理</h3>

    <!-- insert input starts -->
    <div class="row">
        <div class="col-md-7">
            <button ng-click="insertData()" class="btn btn-primary">添加用户</button>
            <hr />
        </div>
    </div>
    <!-- insert input ends -->

    <!-- filter starts -->
    <div class="row" ng-show="paginationTotalItems > 0">
        <div class="col-md-7">
            <div class="input-group">
                <span class="input-group-addon">IdFilter</span>
                <input type="text" ng-model="idFilter" ng-change="filterData(idFilter)" class="form-control" placeholder="TYPE_INT">
            </div>
        </div>
    </div>
    <!-- filter ends -->

    <!-- main data part starts -->
    <div class="row" ng-show="paginationTotalItems > 0">

        <div class="col-md-7">
            <!-- data display starts -->
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Pk #</th>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="pk in dataOnPage">
                        <td>{{ pk }}</td>
                        <th>{{ dataRows[pk].name }}</th>
                        <td>
                            <button ng-click="viewData(pk)" class="btn btn-primary btn-info">查看</button>
                            <button ng-click="updateRole(pk)" class="btn btn-primary btn-warning" ng-show="pk != 1">角色</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!-- data display ends -->
            <!-- pagination starts -->
            <div class="col-md-12">
                <div class="row">
                    <pagination
                            boundary-links="true"
                            total-items="paginationTotalItems"
                            items-per-page="itemsPerPage"
                            page="paginationCurrentPage"
                            class="pagination-sm"
                            num-pages="paginationNumPages"
                            on-select-page="loadPageData(page)"
                            previous-text="&lsaquo;"
                            next-text="&rsaquo;"
                            first-text="&laquo;"
                            last-text="&raquo;">
                    </pagination>
                </div>
            </div>
            <!-- pagination starts -->
        </div>

        <!-- single line data display starts -->
        <div class="col-md-5" ng-show="dataView">
            <div class="affix" style="min-width:20%; top:100px;">
                <table class="table table-striped">
                    <colgroup>
                        <col width="30%">
                        <col width="70%">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>字段</th>
                        <th>数值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="(column, value) in dataView" ng-show="column != 'pk'">
                        <td>{{ column }}</td>
                        <td>{{ value }}</td>
                    </tr>
                    </tbody>
                </table>
                <button ng-click="editData(dataView.pk)" class="btn btn-primary btn-warning">编辑</button>
                <button ng-click="updatePassword(dataView.pk)" class="btn btn-primary btn-danger">密码</button>
                <button ng-show="userRole != '0'" ng-click="deleteData(dataView.pk)" class="btn btn-primary btn-danger">删除</button>
            </div>
        </div>
        <!-- single line data display ends -->

    </div>
    <!-- main data part ends -->

    <!-- modal dialogue starts -->
    <script type="text/ng-template" id="dataModal.html">
        <div class="modal-header">
            <h3>{{ action }} Data<span ng-show="pk"> - ID: {{ pk }}</span></h3>
        </div>
        <div class="modal-body" ng-show="action != 'Delete'">
            <input type="hidden" ng-model="pk" value="{{ pk }}">
            <div class="row" ng-repeat="(column, value) in data">
                <div class="col-md-6">
                    <div class="input-group">
                        <span class="input-group-addon">{{ column }}</span>
                        <input type="{{ type[column] }}" ng-model="data[column]" class="form-control" value="{{ value }}">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="confirm(pk, data)">提交</button>
            <button class="btn btn-warning" ng-click="cancel()">关闭</button>
        </div>
    </script>
    <!-- modal dialogue ends -->

    <!-- modal dialogue starts -->
    <script type="text/ng-template" id="changeRole.html">
        <div class="modal-header">
            <h3>选择角色</h3>
        </div>
        <div class="modal-body" >
            <table class="table table-striped">
                <colgroup>
                    <col width="10%">
                    <col width="90%">
                </colgroup>
                <thead>
                <tr>
                    <th>选择</th>
                    <th>角色</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="(pk, data) in roleData">
                    <th>
                        <input type="checkbox"
                               id="roleId_{{ data.roleId }}"
                               ng-click="choose($event)"
                               ng-checked="data.checked"
                               ng-model="roleId"
                               class="roleId"
                               value="{{ data.roleId }}"
                        />
                    </th>
                    <th>
                        {{ data.name }}
                    </th>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="confirm()">提交</button>
            <button class="btn btn-warning" ng-click="cancel()">关闭</button>
        </div>
    </script>
    <!-- modal dialogue ends -->
</div>